<template>
<!-- 数据处理省份Top5 -->
    <div class="data-process-province-rank-wrap">
        <div class="model-title">数据处理省份Top5</div>
        <div class="top-echart-model" id="provinceRankEchart"></div>
    </div>
</template>
<script>
import { getAreaDataTop } from '@/api/platMonitor'

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");

export default {
    name: 'DataProcessProvinceRank',
    data() {
        return {
            
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            let that = this
            getAreaDataTop({
                topn: 5
            }).then(res => {
                if(res.status === 200) {
                    if(res.data.detail.length > 0) {
                        this.$nextTick(() => {
                            this.renderEchart(res.data.detail)
                        })
                    }
                }
            })
        },
        renderEchart(data, maxData) {
            let that = this
            let chartColor = ['#D6693C', '#43AAAA', '#2370E0', '#DAD367', '#8FACEF']
            let newData = []
            let xAxisData = []
            for (var i = 0, len = data.length; i < len; i++) {
                let item = data[i]
                xAxisData.push(item.areaName)
                newData.push({
                    name: item.areaName,
                    value: item.total,
                    symbol: 'pin',
                    symbolSize: 40,
                    label: {
                        normal: {
                            position: 'top',
                            textStyle: {
                                color: chartColor[i],
                                fontSize: 16,
                            },
                            formatter: item.areaName + '\n' + item.total,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: chartColor[i],
                        }
                    },
                })
            }
            let option = {
                grid: {
                    top: 10,
                    bottom: 20,
                    left: '10%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(val) {
                        return val.name + ': ' + val.value
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel:{
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine:{
                        show: false
                    },
                    data: xAxisData
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: function(value) {
                        return Math.ceil(value.max/3) * 6
                    },
                    axisLine:{
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#61BAF2',
                            opacity: 0.1
                        }
                    }
                },
                series: [{
                    label: {
                        show: true,
                        position: 'top',
                        fontSize: 16,
                        fontWeight: 'bold',
                        formatter: function(val) {
                            return ' ' + val.value[0] + '\n ' + val.value[1]
                        }
                    },
                    data: newData,
                    type: 'scatter',
                }]
            };

            Echarts.init(
                document.getElementById('provinceRankEchart')
            ).setOption(option);
        }
    }
}
</script>
<style lang="scss" scoped>
.data-process-province-rank-wrap {
    .top-echart-model {
        margin-top: 20px;
        width: 100%;
        // height: calc(100% - 40px);
        height: 208px;
    }
}
</style>
